<template>
  <span @click="showPopup">报告路况</span>
  <teleport to="body" v-if="flag">
    <div class="overlay">
      <div class="report-popup">
        <div class="title">
          <span>报告路况</span>
          <i class="iconfont icon-close" @click="closePopup"></i>
        </div>
        <div class="main">
          <ul>
            <li>
              <b>事件类型</b>
              <el-select
                v-model="eventType"
                class="m-2"
                placeholder="请输入事件类型"
              >
                <el-option
                  v-for="item in eventTypes"
                  :key="item"
                  :value="item"
                />
              </el-select>
              <i
                class="iconfont icon-xinghao"
                :style="eventType == '' ? '' : 'color:rgb(97, 240, 109)'"
              ></i>
            </li>
            <li>
              <b>事件地址</b>
              <el-input
                v-model.trim="eventAddress"
                placeholder="请输入路况地址，包含事故路段"
              />
              <i
                class="iconfont icon-xinghao"
                :style="eventAddress == '' ? '' : 'color:rgb(97, 240, 109)'"
              ></i>
            </li>
            <li>
              <b>建筑标识</b>
              <el-input
                v-model="buildingSign"
                placeholder="请输入事故最近的建筑标识"
              />
            </li>
            <li>
              <b>发生时间</b>
              <el-input v-model="eventTime" />
              <i
                class="iconfont icon-xinghao"
                :style="eventTime == '' ? '' : 'color:rgb(97, 240, 109)'"
              ></i>
            </li>
            <li>
              <b>事件描述</b>
              <el-input
                v-model="eventDetails"
                placeholder="请输入事故的具体信息"
              />
            </li>
          </ul>
        </div>
        <div class="footer">
          <button style="background: #337ab7; color: #fff" @click="report">
            确认
          </button>
          <button @click="closePopup">取消</button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { getRoadCondition, reportRoadCondition } from '../../../request/api';

const eventType = ref('');
const eventAddress = ref('');
const buildingSign = ref('');
const eventTime = ref('');
const eventDetails = ref('');
const eventTypes = ['碰撞', '刮擦', '追尾', '碾压', '翻车', '失火', '其他'];
// 控制报告路况窗口显隐
let flag = ref(false);

// 显示报告路况窗口，自动填充事件发生时间
function showPopup() {
  flag.value = true;
  let time = new Date();
  eventTime.value =
    time.getFullYear() +
    '/' +
    (time.getMonth() + 1) +
    '/' +
    time.getDate() +
    ' ' +
    time.getHours() +
    ':' +
    time.getMinutes() +
    ':' +
    time.getSeconds();
}

// 关闭报告路况窗口，清空填写信息
function closePopup() {
  flag.value = false;
  eventType.value = '';
  eventAddress.value = '';
  buildingSign.value = '';
  eventDetails.value = '';
}

// 提交报告路况
async function report() {
  if (
    eventType.value == '' ||
    eventAddress.value == '' ||
    eventTime.value == ''
  ) {
    ElMessage.error('事件类型、事件地址、发生时间为必填项');
    return;
  }
  // 获取用户名
  let username = localStorage.getItem('username');
  // 获取路况信息，得到id最大值
  await getRoadCondition().then((res) => {
    // 获取id最大值
    const max = Math.max(...res.data.map((item) => item.id));
    // 设置提交信息
    const reportInformation = {
      id: max + 1,
      username,
      eventType: eventType.value,
      eventAddress: eventAddress.value,
      buildingSign: buildingSign.value,
      eventTime: eventTime.value,
      eventDetails: eventDetails.value,
      isExamine: false,
    };
    reportRoadCondition(reportInformation);
  });
  closePopup();
  // 成功提示
  ElMessage({
    message: '提交成功',
    type: 'success',
  });
}
</script>

<style lang="scss" scoped>
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  .report-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 415px;
    background-color: #fff;
    transform: translate(-50%, -80%);
    border-radius: 5px;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 12px;
      font-size: 15px;
      border-bottom: 1px solid #ccc;
      color: #555;
      font-weight: 550;
      i {
        font-weight: 800;
        font-size: 20px;
        color: #888;
        &:hover {
          color: rgb(235, 49, 49);
        }
      }
    }
    .main {
      display: flex;
      padding-bottom: 5px;
      margin: 20px;
      ul {
        margin: 0 auto;
        li {
          display: flex;
          justify-content: start;
          align-items: center;
          gap: 25px;
          margin-bottom: 21px;
          .m-2 {
            width: 340px;
          }
          .el-input {
            width: 340px;
          }
          b {
            color: #444;
          }
          i {
            font-size: 10px;
            font-weight: 800;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: end;
      padding: 12px;
      border-top: 1px solid #ccc;
      button {
        padding: 7px 12px;
        border: 0;
        margin-left: 10px;
        border-radius: 4px;
      }
    }
  }
}
</style>
